import { defineComponent, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { getMarketList } from '@/api';
import './index.less'

export default defineComponent({

    setup() {
        const { t } = useI18n()

        const marketList = ref<any>([])

        const coinIcons: any = {
            BTC: '/head/market/BTC.svg',
            ETH: '/head/market/ETH.svg',
            USDT: '/head/market/USDT.svg',
            BNB: '/head/market/BNB.svg',
            XRP: '/head/market/XRP.svg',
            USDC: '/head/market/USDC.svg',
            OKB: '/head/market/OKX.svg',
            DOGE: '/head/market/DOGE.svg',
            ADA: '/head/market/ADA.svg',
            AVAX: '/head/market/ADA.svg',
            SOL: '/head/market/SOL.svg'
        };

        onMounted(() => {
            getMarketList().then((res: any) => {
                marketList.value = res.data
            })
        })
        return () => (
            <div class='text shichang'>
                <span>{t('head.market')}</span>
                <div class='market'>
                    <div class='market_mask'>
                        <div class='market_left'>
                            <div class='text_supported_tokens'>{t('head.supported_tokens')}</div>
                            <div class='left_centent_box'>
                                {
                                    marketList.value.map((el: any) => {
                                        return (
                                            <div class='supported_tokens'>
                                                <div class='supported_tokens_img'>
                                                    {coinIcons[el.name] && <img src={coinIcons[el.name]} alt="" />}
                                                </div>
                                                <div class='supported_tokens_content'>
                                                    <div class='supported_tokens_content_titleBox'>
                                                        <div class='supported_tokens_content_title'>
                                                            <div class='info'>{el.name}</div>
                                                            <div class='info_subtitle'>{el.name}</div>
                                                        </div>
                                                        <div class='title_right'>{el.change_percent}%</div>
                                                    </div>
                                                    <div class='supported_tokens_content_price'>${el.current_price_usd}</div>
                                                </div>
                                                <div class='supported_tokens_details'>
                                                    {t('head.view')}
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            <div class='left_bottom'> <div class='left_bottom_text'>{t('head.all_tokens')}</div> <img src="/head/home_icon_more_normal.svg" class='left_bottom_img' /></div>
                        </div>
                        <div class='market_right'>
                            <div class='text_supported_tokens'>{t('head.support_liquidity_platforms')}</div>
                            <div class='market_platform'>
                                <div class='market_platform_top'>
                                    <img src="/head/market/UniSwap.svg" class='market_platform_top_img' />
                                    <div class='market_platform_top_title'>{t('head.uni_swap1')}</div>
                                </div>
                                <div class='more_platform'>{t('head.uni_swap2')}</div>
                                <div class='supported_tokens_details'>{t('head.view')}</div>
                            </div>
                            <div class='market_platform'>
                                <div class='market_platform_top'>
                                    <img src="/head/market/Pancaking.svg" class='market_platform_top_img' />
                                    <div class='market_platform_top_title'>{t('head.pancake_swap1')}</div>
                                </div>
                                <div class='more_platform'>{t('head.pancake_swap2')} </div>
                                <div class='supported_tokens_details'>{t('head.view')}</div>
                            </div>
                            <div class='market_platform'>
                                <div class='market_platform_top'>
                                    <img src="/head/market/binance.svg" class='market_platform_top_img' />
                                    <div class='market_platform_top_title'>{t('head.coin_security1')}</div>
                                </div>
                                <div class='more_platform'> {t('head.coin_security2')} </div>
                                <div class='supported_tokens_details'>{t('head.view')}</div>
                            </div>
                            <div class='market_platform'>
                                <div class='market_platform_top'>
                                    <img src="/head/market/OKX.svg" class='market_platform_top_img' />
                                    <div class='market_platform_top_title'>{t('head.okx1')}</div>
                                </div>
                                <div class='more_platform'> {t('head.okx2')} </div>
                                <div class='supported_tokens_details'>{t('head.view')}</div>
                            </div>
                            <div class='right_bottom'> <div class='right_bottom_text'>{t('head.more_trading_platforms')}</div> <img src="/head/home_icon_more_normal.svg" class='right_bottom_img' /></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
})